<template>
  <div class="quotation-form">
    <!-- 加载中提示 -->
    <div v-if="loading" class="loading-overlay right-panel-only">
      <div class="loading-content">
        <a-spin size="large" />
        <p class="loading-text">数据加载中...</p>
      </div>
    </div>
    <!-- <div class="header-right">
      <a-button
        type="link"
        @click="closePanel"
        size="small"
        class="close-button"
      >
        <template #icon>
          <CloseOutlined />
        </template>
        关闭
      </a-button>
    </div> -->
    <!-- Tab 标签页 -->
    <div class="tabs-section" v-show="!loading">
      <div class="tabs">
        <button
          @click="activeTab = 'product'"
          :class="{ active: activeTab === 'product' }"
        >
          产品资料
        </button>
        <button
          @click="activeTab = 'labor'"
          :class="{ active: activeTab === 'labor' }"
        >
          人工成本
        </button>
        <button
          @click="activeTab = 'other'"
          :class="{ active: activeTab === 'other' }"
        >
          其他成本
        </button>
        <button
          @click="activeTab = 'cost'"
          :class="{ active: activeTab === 'cost' }"
        >
          成本计算
        </button>
      </div>

      <div class="tab-content-wrapper">
        <!-- 产品资料 Tab -->
        <div v-show="activeTab === 'product'">
          <div class="tab-content">
            <div class="column column-full" style="position: relative;">
              <div class="form-group">
                <div class="item" v-for="field in productInfoFields" :key="field.key">
                  <label>{{ field.label }}</label>
                  <a-input
                    v-if="!field.type"
                    v-model:value="productInfo[field.key]"
                    size="small"
                  />
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqducstus'"
                    v-model:value="productInfo[field.key]"
                    size="small"
                    class="small-select quote-status-select-wide"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_check"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-textarea
                    v-else-if="field.type === 'textarea'"
                    v-model:value="productInfo[field.key]"
                    :auto-size="{ minRows: 2, maxRows: 2.5 }"
                    size="small"
                  />
                  <a-date-picker
                    v-else-if="field.type === 'date'"
                    v-model:value="productInfo[field.key]"
                    size="small"
                    value-format="YYYY-MM-DD"
                  />
                  <span
                    v-if="productInfo[field.key + 'Name']"
                    class="external-info"
                    :title="productInfo[field.key + 'Name']"
                    :class="{ 'customer-info': field.key === 'xmqduc007' }"
                  >
                    {{ productInfo[field.key + 'Name'] }}
                  </span>
                  <span v-if="field.unit" class="unit">{{ field.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 人工成本 Tab -->
        <div v-show="activeTab === 'labor'">
          <div class="tab-content">
            <div class="column column-full">
              <div class="form-group">
                <div class="item" v-for="field in laborCostFields" :key="field.key">
                  <label>{{ field.label }}</label>
                  <a-input
                    v-if="field.type !== 'select' && field.type !== 'date' && field.type !== 'textarea'"
                    v-model:value="laborCost[field.key]"
                    size="small"
                  />
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc038'"
                    v-model:value="laborCost[field.key]"
                    size="small"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_tech"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-textarea
                    v-else-if="field.type === 'textarea'"
                    v-model:value="laborCost[field.key]"
                    :auto-size="{ minRows: 2, maxRows: 2.5 }"
                    size="small"
                  />
                  <a-date-picker
                    v-else-if="field.type === 'date'"
                    v-model:value="laborCost[field.key]"
                    size="small"
                    value-format="YYYY-MM-DD"
                  />
                  <span
                    v-if="laborCost[field.key + 'Name']"
                    class="external-info"
                    :title="laborCost[field.key + 'Name']"
                    :class="{ 'customer-info': field.key === 'xmqduc007' }"
                  >
                    {{ laborCost[field.key + 'Name'] }}
                  </span>
                  <span v-if="field.unit" class="unit">{{ field.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他成本 Tab -->
        <div v-show="activeTab === 'other'">
          <div class="tab-content">
            <div class="column column-full" style="position: relative;">
              <div class="form-group">
                <div
                  class="item"
                  v-for="field in otherCostFields"
                  :key="field.key"
                  :class="{ 'full-width': field.type === 'textarea' }"
                >
                  <label>{{ field.label }}</label>
                  <a-input
                    v-if="!field.type"
                    v-model:value="otherCost[field.key]"
                    size="small"
                  />
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc038'"
                    v-model:value="otherCost[field.key]"
                    size="small"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_tech"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc039'"
                    v-model:value="otherCost[field.key]"
                    size="small"
                    style="width: 60%"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_mold"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc043'"
                    v-model:value="otherCost[field.key]"
                    size="small"
                    style="width: 60%"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_state"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-textarea
                    v-else-if="field.type === 'textarea' && field.key !== 'xmqduc037'"
                    v-model:value="otherCost[field.key]"
                    :auto-size="{ minRows: 2, maxRows: 2.5 }"
                    size="small"
                  />
                  <!-- 修改备注字段的显示方式 -->
                  <a-textarea
                    v-else-if="field.type === 'textarea' && field.key === 'xmqduc037'"
                    v-model:value="otherCost[field.key]"
                    :auto-size="{ minRows: 2.5, maxRows: 2.5 }"
                    size="small"
                  />
                  <a-date-picker
                    v-else-if="field.type === 'date'"
                    v-model:value="otherCost[field.key]"
                    size="small"
                    value-format="YYYY-MM-DD"
                  />
                  <span
                    v-if="otherCost[field.key + 'Name']"
                    class="external-info"
                    :title="otherCost[field.key + 'Name']"
                    :class="{ 'customer-info': field.key === 'xmqduc007' }"
                  >
                    {{ otherCost[field.key + 'Name'] }}
                  </span>
                  <span v-if="field.unit" class="unit">{{ field.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 成本计算 Tab -->
        <div v-show="activeTab === 'cost'">
          <div class="tab-content">
            <div class="column column-full">
              <div class="form-group cost-grid-four">
                <div class="item" v-for="field in costCalculationFields" :key="field.key">
                  <label>{{ field.label }}</label>
                  <a-input
                    v-if="field.type !== 'select' && field.type !== 'date' && field.type !== 'textarea'"
                    v-model:value="costCalculation[field.key]"
                    size="small"
                  />
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc071'"
                    v-model:value="costCalculation[field.key]"
                    size="small"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_quantity"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-select
                    v-else-if="field.type === 'select' && field.key === 'xmqduc043'"
                    v-model:value="costCalculation[field.key]"
                    size="small"
                    style="width: 60%"
                    class="small-select"
                  >
                    <a-select-option
                      v-for="item in dropDownList.quote_state"
                      :key="item.gzcbl002"
                      :value="item.gzcbl002"
                    >
                      {{ item.gzcbl004 }}
                    </a-select-option>
                  </a-select>
                  <a-textarea
                    v-else-if="field.type === 'textarea'"
                    v-model:value="costCalculation[field.key]"
                    :auto-size="{ minRows: 2, maxRows: 2.5 }"
                    size="small"
                  />
                  <a-date-picker
                    v-else-if="field.type === 'date'"
                    v-model:value="costCalculation[field.key]"
                    size="small"
                    value-format="YYYY-MM-DD"
                  />
                  <span
                    v-if="costCalculation[field.key + 'Name']"
                    class="external-info"
                    :title="costCalculation[field.key + 'Name']"
                    :class="{ 'customer-info': field.key === 'xmqduc007' }"
                  >
                    {{ costCalculation[field.key + 'Name'] }}
                  </span>
                  <span v-if="field.unit" class="unit">{{ field.unit }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 材料列表 -->
    <div class="section flex-section" v-show="!loading">
      <div class="material-list-header">
        <div class="tabs">
          <!-- <button @click="switchMaterialType('main')" :class="materialType === 'main' ? 'active' : ''">主材列表</button>
          <button @click="switchMaterialType('auxiliary')" :class="materialType === 'auxiliary' ? 'active' : ''">辅材列表</button>
          <button @click="switchMaterialType('outsourcing')" :class="materialType === 'outsourcing' ? 'active' : ''">委外列表</button> -->
          <button class="active">材料列表</button>
        </div>
      </div>
      <div class="table-container table-container-adjusted" style="position: relative;">
        <!-- 表格加载状态 -->
        <div v-if="tableLoading" class="table-loading-overlay">
          <div class="table-loading-content">
            <a-spin size="large" />
            <p class="table-loading-text">数据加载中...</p>
          </div>
        </div>

        <SortableTable
          :data="paginatedMaterialList"
          :columns="materialColumns"
          :show-sort-indicators="true"
          :sorted-indicator-color="'#fff'"
          :unsorted-indicator-color="'rgba(255, 255, 255, 0.5)'"
          @sort-change="handleMaterialSortChange"
          @row-dblclick="handleMaterialRowDblClick"
          @cell-dblclick="handleCellDblClick"
        >
          <!-- 为每个字段创建独立的插槽 -->
          <template v-for="column in materialColumns" :key="column.key" #[`column-${column.key}`]="{ item, index }">
            <div
              v-if="editingCell.rowIndex === index && editingCell.colKey === column.key"
              class="cell-edit-wrapper"
              @mousedown.stop
              @click.stop
            >
              <input
                v-model="editingCell.value"
                class="editing-input"
                @keydown.enter="saveEdit"
                @keydown.esc="cancelEdit"
                @blur="saveEdit"
              />
            </div>
            <div
              v-else
              class="cell-content-wrapper"
              @dblclick="startEdit(index, column.key, item[column.key])"
            >
              {{ item[column.key] }}
            </div>
          </template>
        </SortableTable>
        <div v-if="paginatedMaterialList.length === 0 && !tableLoading" class="no-data">
          暂无数据
        </div>
      </div>

      <!-- <div class="pagination-wrapper">
        <a-pagination
          v-model:current="materialPagination.current"
          v-model:page-size="materialPagination.pageSize"
          :total="materialPagination.total"
          :show-size-changer="true"
          :page-size-options="materialPagination.pageSizeOptions"
          @change="handleMaterialPageChange"
          @show-size-change="handleMaterialPageSizeChange"
          size="small"
        />
      </div> -->
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { Input, DatePicker, Textarea, Select, Spin, Button, message, } from 'ant-design-vue';
import { SortableTable } from '@/components/custom';
import { useRoute } from 'vue-router';
import {
  qecutOneApi, // 获取模切报价单列表的某一项
  getDitcApi, //获取模切报价单详情的下拉列表数据
} from '@/service/api/modules/die-cutting/die-cutting';
import { useTabStore } from '@/store/modules/tab'; // 引入tabStore

const AInput = Input;
const ATextarea = Textarea;
const ADatePicker = DatePicker;
const ASelect = Select;
const ASelectOption = Select.Option;
const ASpin = Spin;
const AButton = Button;

// 添加loading状态
const loading = ref(false);
// 表格加载状态
const tableLoading = ref(false);

// 当前激活的Tab
const activeTab = ref('product');

// 定义产品资料字段
const productInfoFields: Array<{key: string, label: string, type?: string, width?: string, unit?: string}> = [
  { key: 'xmqducdocno', label: '报价单号' },
  { key: 'xmqduc009', label: 'Model' },
  { key: 'xmqduc001', label: '版本' },
  { key: 'xmqducdocdt', label: '报价日期', type: 'date' },
  { key: 'xmqduc002', label: '申请单号' },
  { key: 'xmqduc010', label: '终端货号' },
  { key: 'xmqduc011', label: '报价人员' },
  { key: 'xmqduc004', label: '产品编码' },
  { key: 'xmqduc005', label: '品名' },
  { key: 'xmqduc013', label: '报价币种' },
  { key: 'xmqduc006', label: '规格' },
  { key: 'xmqduc072', label: '汇率' },
  { key: 'xmqduc015', label: '报价数量' },
  { key: 'xmqduc014', label: '税种' },
  { key: 'xmqduc008', label: '客户货号' },
  { key: 'xmqduc007', label: '客户编号' },
  { key: 'xmqduc073', label: '税率' },
  { key: 'xmqduc074', label: 'BOM特性' },
  { key: 'xmqducstus', label: '报价单状态', type: 'select', width: 'long' }, // 下拉选择，设置为长一点的宽度
];

// 定义人工成本字段
const laborCostFields: Array<{key: string, label: string, type?: string, width?: string, unit?: string}> = [
  { key: 'xmqduc016', label: '模切&冲压人工(人数)' },
  { key: 'xmqduc019', label: '模切&冲压薪资(人数/元)' },
  { key: 'xmqduc022', label: '模切&冲压产量(小时)' },
  { key: 'xmqduc089', label: '开料人工(人数)' },
  { key: 'xmqduc090', label: '开料薪资(人数/元)' },
  { key: 'xmqduc091', label: '开料产量(小时)' },
  { key: 'xmqduc017', label: '手工对贴&除废人工(人数)' },
  { key: 'xmqduc020', label: '手工对贴&除废薪资(人数/元)' },
  { key: 'xmqduc023', label: '手工对贴&除废产量(小时)' },
  { key: 'xmqduc018', label: '包装检验人工(人数)' },
  { key: 'xmqduc021', label: '包装检验薪资(人数/元)' },
  { key: 'xmqduc024', label: '包装检验产量(小时)' },
  { key: 'xmqduc086', label: '其他产量(人数)' },
  { key: 'xmqduc087', label: '其他薪资(人数/元)' },
  { key: 'xmqduc088', label: '其他产量(小时)' },
  { key: 'xmqduc025', label: '关税', unit: '%' },
  { key: 'xmqduc029', label: '单位' },
  { key: 'xmqduc026', label: '国外运费' },
  { key: 'xmqduc027', label: 'MOQ' },
  { key: 'xmqduc028', label: '材质' }
];

// 定义其他成本字段
const otherCostFields: Array<{key: string, label: string, type?: string, width?: string, unit?: string}> = [
  { key: 'xmqduc030', label: '不良率', unit: '%' },
  { key: 'xmqduc038', label: '工艺描述', type: 'select' },
  { key: 'xmqduc039', label: '模具', type: 'select' },
  { key: 'xmqduc049', label: '管理费', unit: '%' },
  { key: 'xmqduc095', label: '每圈数量' },
  { key: 'xmqduc040', label: '模具费用' },
  { key: 'xmqduc068', label: '销售费', unit: '%' },
  { key: 'xmqduc031', label: '包装运输', unit: '%' },
  { key: 'xmqduc094', label: '模切次数' },
  { key: 'xmqduc052', label: '研发费', unit: '%' },
  { key: 'xmqduc033', label: '其他', unit: '%' },
  { key: 'xmqduc041', label: '模具寿命(万/模)' },
  { key: 'xmqduc051', label: '财务费', unit: '%' },
  { key: 'xmqduc096', label: '调机米数' },
  { key: 'xmqduc042', label: '穴数' },
  { key: 'xmqduc043', label: '报价状态', type: 'select' },
  { key: 'xmqduc037', label: '备注', type: 'textarea' }
];

// 定义成本计算字段
const costCalculationFields: Array<{key: string, label: string, type?: string, width?: string, unit?: string}> = [
  { key: 'xmqduc045', label: '材料成本金额' },
  { key: 'xmqduc046', label: '委外成本金额' },
  { key: 'xmqduc047', label: '人工成本金额' },
  { key: 'xmqduc048', label: '运输成本' },
  { key: 'xmqduc049', label: '管理费' },
  { key: 'xmqduc050', label: '销售费' },
  { key: 'xmqduc051', label: '财务费' },
  { key: 'xmqduc052', label: '研发费' },
  { key: 'xmqduc053', label: '其他费用' },
  { key: 'xmqduc054', label: '模具费' },
  { key: 'xmqduc055', label: '包装费' },
  { key: 'xmqduc056', label: '合计成本' },
  { key: 'xmqduc057', label: '本市报价未税单价' },
  { key: 'xmqduc058', label: '本市报价含税单价' },
  { key: 'xmqduc059', label: '外币报价单价' },
  { key: 'xmqduc060', label: '目标报价' },
  { key: 'xmqduc061', label: '报价利润比', unit: '%' },
  { key: 'xmqduc062', label: '材料占比', unit: '%' },
  { key: 'xmqduc063', label: '客户确认未税单价' },
  { key: 'xmqduc064', label: '客户确认含税单价' },
  { key: 'xmqduc065', label: '客户确认外币单价' },
  { key: 'xmqduc066', label: '确认利润比', unit: '%' },
  { key: 'xmqduc071', label: '量产否', type: 'select' },
  { key: 'xmqduc067', label: '人工占比', unit: '%' }
];

// 定义材料列表列
const materialColumns = [
  { key: 'index', label: '序号', width: '2.5vw' }, // 添加序号列
  // { key: 'xmqeucseq', label: '项次', width: '2.5vw' },
  // { key: 'xmqeuc001', label: '版本', width: '3.75vw' },
  { key: 'xmqeuc002Name', label: '材料用途', width: '5vw' },
  { key: 'xmqeuc003', label: '物料编号', width: '6.25vw' },
  { key: 'xmqeuc004', label: '品名', width: '7.5vw' },
  { key: 'xmqeuc005', label: '规格', width: '6.25vw' },
  { key: 'xmqeuc006', label: '单位', width: '3.125vw' },
  { key: 'xmqeuc007', label: '分切卷数', width: '4.375vw' },
  { key: 'xmqeuc008', label: '幅宽', width: '3.75vw' },
  { key: 'xmqeuc009', label: '行程', width: '4.375vw' },
  { key: 'xmqeuc010', label: '穴数', width: '3.125vw' },
  { key: 'xmqeuc011', label: '产量', width: '3.75vw' },
  { key: 'xmqeuc012', label: '原材料单价', width: '5vw' },
  { key: 'xmqeuc013', label: '单品材料价', width: '5.625vw' },
  // { key: 'xmqeuc014', label: '本币单价', width: '5vw' },
  { key: 'xmqeuc015', label: '用量(份)', width: '4.375vw' },
  { key: 'xmqeuc017', label: '原始宽度', width: '4.375vw' },
  // { key: 'xmqeuc022', label: '平均价', width: '5vw' },
  // { key: 'xmqeuc023', label: '基准价', width: '5vw' },
  { key: 'xmqeuc016', label: '备注', width: '6.25vw' },
  // { key: 'xmqeuc025', label: '材料备注1', width: '5vw' },
  // { key: 'xmqeuc026', label: '材料备注2', width: '5vw' },
];

// 导出和预览相关变量
const exportLoading = ref(false);
const previewLoading = ref(false);
const previewVisible = ref(false);
const previewFileUrl = ref('');
const previewFileName = ref('');

// 用于存储主材、辅材和委外列表的响应式变量
// const materialMainList = ref([] as any[]);
// const materialAuxiliaryList = ref([] as any[]);
// const materialOutsourcingList = ref([] as any[]);

// 定义写死数据
const productInfo = reactive({} as Record<string, any>);

const laborCost = reactive({} as Record<string, any>);

const otherCost = reactive({} as Record<string, any>);

// 成本计算数据
const costCalculation = reactive({} as Record<string, any>);

let dropDownList = reactive({
  quote_check: [] as any[],
  quote_tech: [] as any[],
  quote_mold: [] as any[],
  quote_quantity: [] as any[],
  quote_state: [] as any[],
  quote_material: [] as any[]
});

// 材料类型状态：main-主材，auxiliary-辅材，outsourcing-委外
// const materialType = ref('main');
const materialList = ref([] as any[]);

// 原始材料列表数据备份（用于排序）
const originalMaterialList: any[] = [];

// 材料列表分页配置
const materialPagination = reactive({
  current: 1,
  pageSize: 999,
  total: computed(() => materialList.value.length),
  pageSizeOptions: ['10', '20', '50', '100']
});

// 计算当前页材料列表数据
const paginatedMaterialList = computed(() => {
  const start = (materialPagination.current - 1) * materialPagination.pageSize;
  const end = start + materialPagination.pageSize;
  return materialList.value.slice(start, end).map((item, index) => {
    return {
      ...item,
      index: start + index + 1
    };
  });
});

// 排序处理函数
const handleMaterialSortChange = (sortState: any) => {
  console.log('材料列表排序状态:', sortState);
  // 在这里可以处理排序逻辑
};

// 切换材料类型
// const switchMaterialType = (type: string) => {
//   if (materialType.value !== type) {
//     materialType.value = type;
//     // 切换时重新加载对应类型的数据
//     loadMaterialData();
//   }
// };

// 加载材料数据
const loadMaterialData = () => {
  tableLoading.value = true;
  // 根据当前材料类型加载对应数据
  // if (materialType.value === 'main') {
  //   materialList.value = Array.isArray(materialMainList.value) ? materialMainList.value : [];
  //   originalMaterialList.length = 0;
  //   originalMaterialList.push(...materialList.value);
  // } else if (materialType.value === 'auxiliary') {
  //   materialList.value = Array.isArray(materialAuxiliaryList.value) ? materialAuxiliaryList.value : [];
  //   originalMaterialList.length = 0;
  //   originalMaterialList.push(...materialList.value);
  // } else {
  //   materialList.value = Array.isArray(materialOutsourcingList.value) ? materialOutsourcingList.value : [];
  //   originalMaterialList.length = 0;
  //   originalMaterialList.push(...materialList.value);
  // }

  // 直接使用已有的materialList数据
  originalMaterialList.length = 0;
  originalMaterialList.push(...materialList.value);

  // 使用nextTick确保在下一个DOM更新周期后关闭loading
  nextTick(() => {
    tableLoading.value = false;
  });
};


const qecut = () => {
  getDitcApi({}).then((res: any) => {
    // 清空原有数据
    for (let key in dropDownList) {
      (dropDownList as any)[key] = [];
    }
    // 赋予新数据
    Object.keys(res.data).forEach((key: string) => {
      if (Array.isArray(res.data[key])) {
        (dropDownList as any)[key] = res.data[key];
      }
    });
  })
}

const qecutOne = (obj: any) => {
  console.log('当前类型:', type.value);
  // 设置加载状态
  loading.value = true;

  // 根据type参数决定调用哪个API
  // const apiToCall = type.value === 'bjcx' ? getOneDetailsApi : qecutOneApi;

  qecutOneApi({
    xmqducent: obj.xmqeucent,
    xmqducdocno: obj.xmqeucdocno,
    xmqduc001: obj.xmqeuc001
  }).then((res: any) => {
    const data = res.otherData;
    if (data.code === 200) {
      // 直接使用接口返回的数据对象
      const apiData = data.data;

      // 填充产品信息
      Object.assign(productInfo, apiData);

      // 填充人工成本信息
      Object.assign(laborCost, apiData);

      // 填充其他成本信息
      Object.assign(otherCost, apiData);

      // 填充成本计算信息
      Object.assign(costCalculation, {
        xmqduc045: apiData.xmqduc045 || 0, // 材料成本金额
        xmqduc046: apiData.xmqduc046 || 0, // 委外成本金额
        xmqduc047: apiData.xmqduc047 || 0, // 人工成本金额
        xmqduc048: apiData.xmqduc048 || 0, // 运输成本
        xmqduc049: apiData.xmqduc049 || 0, // 管理费
        xmqduc050: apiData.xmqduc050 || 0, // 销售费
        xmqduc051: apiData.xmqduc051 || 0, // 财务费
        xmqduc052: apiData.xmqduc052 || 0, // 研发费
        xmqduc053: apiData.xmqduc053 || 0, // 其他费用
        xmqduc054: apiData.xmqduc054 || 0, // 模具费
        xmqduc055: apiData.xmqduc055 || 0, // 包装费
        xmqduc056: apiData.xmqduc056 || 0, // 合计成本
        xmqduc057: apiData.xmqduc057 || 0, // 本市报价未税单价
        xmqduc058: apiData.xmqduc058 || 0, // 本市报价含税单价
        xmqduc059: apiData.xmqduc059 || 0, // 外币报价单价
        xmqduc060: apiData.xmqduc060 || 0, // 目标报价
        xmqduc061: apiData.xmqduc061 || 0, // 报价利润比(%)
        xmqduc062: apiData.xmqduc062 || 0, // 材料占比(%)
        xmqduc063: apiData.xmqduc063 || 0, // 客户确认未税单价
        xmqduc064: apiData.xmqduc064 || 0, // 客户确认含税单价
        xmqduc065: apiData.xmqduc065 || 0, // 客户确认外币单价
        xmqduc066: apiData.xmqduc066 || 0, // 确认利润比(%)
        xmqduc071: apiData.xmqduc071 || '', // 量产否
        xmqduc067: apiData.xmqduc067 || 0 // 人工占比(%)
      });

      // 根据type决定如何加载材料列表数据
      // 直接使用qecutOneApi返回的主材、辅材和委外数据
      // materialMainList.value = Array.isArray(apiData.zcList) ? apiData.zcList : [];
      // materialAuxiliaryList.value = Array.isArray(apiData.fcList) ? apiData.fcList : [];
      // materialOutsourcingList.value = Array.isArray(apiData.wwList) ? apiData.wwList : [];

      // 根据当前材料类型加载对应数据
      // if (materialType.value === 'main') {
      //   materialList.value = materialMainList.value;
      // } else if (materialType.value === 'auxiliary') {
      //   materialList.value = materialAuxiliaryList.value;
      // } else {
      //   materialList.value = materialOutsourcingList.value;
      // }

      // 使用统一的材料列表数据
      if (Array.isArray(apiData.materialList)) {
        materialList.value = apiData.materialList;
        originalMaterialList.length = 0;
        originalMaterialList.push(...materialList.value);
      } else {
        materialList.value = [];
        originalMaterialList.length = 0;
      }

      // 关闭表格加载状态
      tableLoading.value = false;

      // 同时更新原始材料列表数据备份（用于排序）
      // originalMaterialList.length = 0;
      // originalMaterialList.push(...materialList.value);
    }
    // 关闭加载状态
    loading.value = false;
  }).catch(() => {
    // 出错时也关闭加载状态
    loading.value = false;
  })
}

// 获取路由参数
const route = useRoute();
const tabStore = useTabStore(); // 使用tabStore

// 使用 sessionStorage 存储参数，确保在页面切换时参数不丢失
const storageKey = `quotation-detail-params-${window.location.pathname}`;
let initialQuery = route.query;

// 如果当前路由没有查询参数，尝试从 sessionStorage 恢复
if (Object.keys(initialQuery).length === 0) {
  const savedParams = sessionStorage.getItem(storageKey);
  if (savedParams) {
    try {
      initialQuery = JSON.parse(savedParams);
    } catch (e) {
      console.error('解析保存的参数失败:', e);
    }
  }
} else {
  // 有查询参数时，存储到 sessionStorage
  sessionStorage.setItem(storageKey, JSON.stringify(initialQuery));
}

const queryParams = ref(initialQuery);
console.log('接收到的路由参数:', queryParams.value);

// 添加防重复加载标志
const hasLoaded = ref(false);
let currentQueryKey = '';

// 标记标签页是否已关闭
const isTabClosed = ref(false);

// 清空所有数据的函数
const clearAllData = () => {
  // 标记标签页已关闭
  isTabClosed.value = true;

  // 清空产品信息
  for (const key in productInfo) {
    delete (productInfo as any)[key];
  }

  // 清空人工成本
  for (const key in laborCost) {
    delete (laborCost as any)[key];
  }

  // 清空其他成本
  for (const key in otherCost) {
    delete (otherCost as any)[key];
  }

  // 清空成本计算
  for (const key in costCalculation) {
    delete (costCalculation as any)[key];
  }

  // 清空材料列表
  materialList.value = [];
  originalMaterialList.length = 0;

  // 重置分页
  materialPagination.current = 1;
  materialPagination.pageSize = 999;

  // 重置材料类型
  // materialType.value = 'main';

  // 清空下拉列表
  for (const key in dropDownList) {
    (dropDownList as any)[key] = [];
  }

  // 重置加载状态
  loading.value = false;
  tableLoading.value = false;
  exportLoading.value = false;
  previewLoading.value = false;

  // 重置加载标志
  hasLoaded.value = false;
  currentQueryKey = '';

  // 清空路由参数
  queryParams.value = {};
};

// 用于存储当前页面的标签页ID
let currentTabId = '';
const type = computed(() => route.query.type ? String(route.query.type) : '');

// 接收父组件传递的参数
const props = defineProps({
  quotationData: {
    type: Object,
    default: () => ({})
  }
});

// 监听父组件传递的参数变化
watch(
  () => props.quotationData,
  (newData) => {
    if (newData && Object.keys(newData).length > 0) {
      // 将父组件传递的参数转换为查询参数格式
      const queryData = {
        xmqeucent: newData.xmqducent,
        xmqeucdocno: newData.xmqducdocno,
        xmqeuc001: newData.xmqduc001,
        tabTitle: newData.xmqduc007,
        templateCode: 'T001'
      };

      // 更新查询参数
      queryParams.value = queryData;

      // 加载数据
      loadMaterialData();
      qecutOne(queryData);
      qecut();
    }
  },
  { immediate: true }
);

// 监听路由变化
watch(
  () => route.query,
  (newQuery) => {
    console.log('路由参数变化:', route.path, newQuery);
    // 只有在当前路由为 '/die-cutting-quotation/quotation' 时才执行
    if (route.name === 'die-cutting-quotation_quotation') {
      // 更新查询参数并存储到 sessionStorage
      if (Object.keys(newQuery).length > 0) {
        queryParams.value = newQuery;
        sessionStorage.setItem(storageKey, JSON.stringify(newQuery));
        // 标签页未关闭
        isTabClosed.value = false;
      }
      console.log('路由参数发生变化:', newQuery);

      // 获取当前标签页ID
      currentTabId = tabStore.getTabIdByRoute(route);

      // 生成查询参数的唯一标识
      const queryKey = JSON.stringify(newQuery);

      // 只有当参数发生变化时才重新加载数据
      if ((Object.keys(newQuery).length > 0) && currentQueryKey !== queryKey) {
        // 在这里可以添加处理路由参数变化的逻辑
        loadMaterialData(); // 改为使用新的加载函数
        qecutOne(newQuery);
        // 调用qecut但不使用finally，因为可能不返回Promise
        qecut();
        // 更新currentQueryKey防止重复加载
        currentQueryKey = queryKey;
      }
    }
  },
  { immediate: true }
);

// 初始化数据
onMounted(() => {
  // 获取当前标签页ID
  currentTabId = tabStore.getTabIdByRoute(route);
  console.log('当前标签页ID:', currentTabId);

  // 监听标签页切换事件，判断是否需要清空数据
  const unwatch = watch(
    () => tabStore.tabs,
    (newTabs, oldTabs) => {
      // 检查当前标签页是否被关闭
      console.log('标签页切换事件:', newTabs, oldTabs);
      const isCurrentTabClosed = oldTabs.some(tab => tab.id === currentTabId)
        && !newTabs.some(tab => tab.id === currentTabId);

      if (isCurrentTabClosed) {
        // 当前标签页已被关闭，清空数据和 sessionStorage
        console.log('标签页已关闭，清空数据和缓存参数');
        clearAllData();
        sessionStorage.removeItem(storageKey);
      }
    },
    { deep: true }
  );

  // 在组件卸载时取消监听
  onBeforeUnmount(() => {
    unwatch();
  });

  // 只有当参数发生变化时才重新加载数据
  const queryKey = JSON.stringify(queryParams.value);
  if ((Object.keys(queryParams.value).length > 0) && currentQueryKey !== queryKey) {
    loadMaterialData();
    qecutOne(queryParams.value);
    qecut();
    // 更新currentQueryKey防止重复加载
    currentQueryKey = queryKey;
  }
});

// 组件卸载前清除监听和数据
onBeforeUnmount(() => {
  // 注意：这里不清除 sessionStorage，只有标签页关闭时才清除
  // 清空所有数据
  clearAllData();
});

// 在组件激活时也处理参数
import { onActivated } from 'vue';
onActivated(() => {
  console.log('组件被激活，当前参数:', queryParams.value);

  // 检查 sessionStorage 中是否有保存的参数
  const savedParams = sessionStorage.getItem(storageKey);
  if (savedParams) {
    try {
      const storedParams = JSON.parse(savedParams);
      // 如果 sessionStorage 中有参数且与当前参数不同，则更新参数
      const storedQueryKey = JSON.stringify(storedParams);
      const currentQueryKey = JSON.stringify(queryParams.value);

      if (storedQueryKey !== currentQueryKey) {
        queryParams.value = storedParams;
        isTabClosed.value = false; // 重新设置标签页状态为未关闭
      }
    } catch (e) {
      console.error('解析保存的参数失败:', e);
    }
  }

  // 只有当参数发生变化时才重新加载数据
  const queryKey = JSON.stringify(queryParams.value);
  if ((Object.keys(queryParams.value).length > 0) && currentQueryKey !== queryKey) {
    loadMaterialData();
    qecutOne(queryParams.value);
    qecut();
    // 更新currentQueryKey以避免重复加载
    currentQueryKey = queryKey;
  }
});

// 添加编辑状态管理
const editingCell = ref({
  rowIndex: -1,
  colKey: '',
  value: ''
});

// 定义可编辑的列
const editableColumns = new Set([
  'xmqeuc001', 'xmqeuc002Name', 'xmqeuc003', 'xmqeuc004', 'xmqeuc005', 'xmqeuc006', 'xmqeuc007',
  'xmqeuc008', 'xmqeuc009', 'xmqeuc010', 'xmqeuc011', 'xmqeuc012', 'xmqeuc013',
  'xmqeuc014', 'xmqeuc015', 'xmqeuc017', 'xmqeuc022', 'xmqeuc023', 'xmqeuc016',
  'xmqeuc025', 'xmqeuc026'
]);

// 开始编辑单元格
const startEdit = (rowIndex: number, colKey: string, value: any) => {
  if (editableColumns.has(colKey)) {
    editingCell.value = {
      rowIndex,
      colKey,
      value: value !== undefined && value !== null ? String(value) : ''
    };

    // 等待DOM更新后聚焦输入框
    nextTick(() => {
      const input = document.querySelector('.editing-input');
      if (input) {
        (input as HTMLInputElement).focus();
      }
    });
  }
};

// 保存编辑的值
const saveEdit = () => {
  const { rowIndex, colKey, value } = editingCell.value;
  if (rowIndex >= 0 && colKey) {
    // 更新数据
    const actualRowIndex = (materialPagination.current - 1) * materialPagination.pageSize + rowIndex;
    materialList.value[actualRowIndex][colKey] = value;

    // 触发更新通知或其他业务逻辑
    // message.success('数据已更新');
  }
  // 退出编辑状态
  cancelEdit();
};

// 取消编辑
const cancelEdit = () => {
  editingCell.value = {
    rowIndex: -1,
    colKey: '',
    value: ''
  };
};

// 添加材料行双击处理函数
const handleMaterialRowDblClick = (item: any, index: number, event: Event) => {
  // console.log('双击材料行:', item);
  // message.info(`双击了第 ${index + 1} 行数据，物料编号: ${item.xmqeuc003}`);
};

// 处理单元格双击事件
const handleCellDblClick = (item: any, column: any, rowIndex: number, event: Event) => {
  // 显示被双击的列标签
  message.info(`双击了"${column.label}"列`);

  // 如果该列可编辑，则开始编辑（包括值为0的情况）
  if (editableColumns.has(column.key)) {
    startEdit(rowIndex, column.key, item[column.key]);
  }
};

// 关闭面板方法
const closePanel = () => {
  console.log('关闭面板');
  // 通过事件通知父组件关闭面板
  window.parent.postMessage({ type: 'CLOSE_DETAIL_PANEL' }, '*');
};

</script>

<style scoped>
.quotation-form {
  line-height: 1.2;
  color: #333;
  padding: 0.5vw 0.625vw 0;
  background-color: #f5f5f5;
  /* min-width: 60vw; */
  overflow-x: hidden;
  height: calc(100vh);
  display: flex;
  flex-direction: column;
}


/* .grid-section {
  display: flex;
  gap: 0.375vw;
  margin-bottom: 0.375vw;
  width: 99%;
} */

.column {
  background: white;
  padding: 0.25vw;
  border-radius: 0.1875vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* .column-30 {
  flex: 0 0 32%;
}

.column-40 {
  flex: 0 0 36%;
} */

.form-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.125vw;
}

.form-group .item {
  display: flex;
  flex-direction: row;
  gap: 0.25vw;
  align-items: center;
  min-height: 1.6875vw;
}

.form-group label {
  font-weight: 500;
  font-size: 0.8125vw;
  margin-bottom: 0;
  min-width: 3.75vw;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

:deep(.ant-input),
:deep(.ant-input-affix-wrapper) {
  font-size: 0.8125vw; /* 调整字体大小 */
  width: 100%;
  padding: 0.0625vw 0.3125vw;
  height: 1.6875vw; /* 调整高度 */
}

:deep(.ant-input-affix-wrapper) .ant-input {
  font-size: 0.8125vw; /* 调整字体大小 */
  height: 1.375vw; /* 调整高度 */
}

:deep(.ant-picker) {
  font-size: 0.8125vw; /* 调整字体大小 */
  width: 100%;
  padding: 0.0625vw 0.3125vw;
  height: 1.6875vw; /* 调整高度 */
}

:deep(.ant-picker-input > input) {
  font-size: 0.8125vw; /* 调整字体大小 */
  height: 1.375vw; /* 调整高度 */
}

:deep(.ant-input textarea) {
  font-size: 0.8125vw; /* 调整字体大小 */
  resize: vertical;
}

.full-width {
  grid-column: span 2;
}

.full-width :deep(.ant-input) {
  width: 100%;
}

.unit {
  margin-left: 0.25vw;
  color: #666;
  font-size: 0.75vw; /* 调整字体大小 */
}

.external-info {
  /* margin-left: 0.25vw; */
  color: #1F77B4;
  font-size: 0.7vw; /* 调整字体大小 */
  white-space: nowrap;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  flex: 1 1 auto;
  /* min-width: 0; */
  cursor: pointer;
  position: relative;
}

.customer-info {
  white-space: normal;
  word-break: break-all;
  width: 8vw;
  overflow: visible;
}

/* .external-info:hover::after {
  content: attr(title);
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  padding: 0.125vw 0.3125vw;
  border: 0.0625vw solid #ddd;
  border-radius: 0.125vw;
  z-index: 1000;
  white-space: pre;
  font-size: 0.8125vw;
  color: #666;
  box-shadow: 0 0.125vw 0.25vw rgba(0,0,0,0.1);
  max-width: 18.75vw;
  word-break: break-all;
} */

.section {
  background: white;
  padding: 0.25vw;
  border-radius: 0.1875vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0,0,0,0.05);
  margin-bottom: 0.375vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flex-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.section h3 {
  margin: 0 0 0.25vw 0;
  padding-bottom: 0.125vw;
  border-bottom: 0.0625vw solid #eee;
  color: #1F77B4;
  font-size: 0.9375vw; /* 调整字体大小 */
  font-weight: 600;
  flex: 0 0 auto;
}

.section-title {
  margin: 0 0 0.25vw 0;
  padding-bottom: 0.125vw;
  border-bottom: 0.0625vw solid #eee;
  color: #1F77B4;
  font-size: 0.9375vw; /* 调整字体大小 */
  font-weight: 600;
  flex: 0 0 auto;
}

.table-container {
  overflow: hidden;
  max-width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.table-container-adjusted {
  flex: 1 1 13vw; /* 增加表格区域高度 */
}

.table-cell {
  padding: 0.25vw 0.125vw;
  border-right: 0.0625vw solid #e8e8e8;
  font-size: 0.75vw; /* 调整字体大小 */
  white-space: nowrap;
  color: #333;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: none;
  min-width: 0;
}

.table-cell:last-child {
  border-right: none;
}

.cell-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 0.125vw;
  box-sizing: border-box;
}

.table-row-even {
  background-color: white;
}

.table-row-odd {
  background-color: #EFF4F9;
}

.table-body .table-row:hover {
  background-color: #e6f7ff !important;
}

.cost-grid {
  grid-template-columns: repeat(6, 1fr);
  gap: 0.125vw;
  flex: 1;
  overflow-y: auto;
  margin: 0;
}

.cost-grid-four {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.125vw;
  flex: 1;
  overflow-y: auto;
  margin: 0;
}

.cost-grid-four .item {
  margin-bottom: 0.125vw;
}

.cost-grid .item {
  margin-bottom: 0.125vw;
}

/* 修改下拉选择框样式，实现自适应 */
.small-select {
  width: 100% !important;
}

.small-select :deep(.ant-select-selector) {
  font-size: 0.8125vw; /* 调整字体大小 */
  padding: 0.0625vw 0.3125vw !important;
  height: 1.6875vw !important; /* 调整高度 */
  width: 100% !important;
  display: flex;
  align-items: center;
}

/* .small-select :deep(.ant-select-selection-item) {
  font-size: 0.8125vw;
  line-height: 1.375vw;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

.small-select :deep(.ant-select-arrow) {
  font-size: 0.8125vw; /* 调整字体大小 */
}

.quote-status-select {
  width: 100% !important;
}

.quote-status-select :deep(.ant-select-selector) {
  width: 100% !important;
  display: flex;
  align-items: center;
}

.examine-icon,
.quote-state-icon {
  width: 3.125vw;
  height: 1.25vw;
  margin-left: 0.3125vw;
  vertical-align: middle;
}

.watermark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 11.25vw auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

.watermark-overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 7.5vw auto;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

/* 加载中样式 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-content {
  text-align: center;
}

.loading-text {
  margin-top: 0.625vw;
  font-size: 0.9375vw; /* 调整字体大小 */
  color: #666;
}

.no-data {
  position: absolute;
  top: 1.625vw;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75vw; /* 调整字体大小 */
  color: #999;
  background: white;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  padding: 0.1875vw 0;
  flex: 0 0 auto;
}

/* 报价单状态选择框宽度调整 - 使用更具体的选择器避免影响其他元素 */
.item:has(.quote-status-select-wide) {
  grid-column: span 2;
}

.quote-status-select-wide {
  width: 100% !important;
}

/* 报价单状态选择框宽度调整 - 使用更具体的选择器 */
:deep(.quote-status-select-wide.ant-select) {
  width: 8vw !important;
}

:deep(.quote-status-select-wide.ant-select .ant-select-selector) {
  width: 100% !important;
  min-width: 8vw !important;
}

/* 标签页区域整体样式 */
.tabs-section {
  /* margin-bottom: 1.04vw; */
}

.tab-content-wrapper {
  background: white;
  padding: 0.25vw;
  border-radius: 0.1875vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0,0,0,0.05);
  margin-bottom: 0.375vw;
}

/* 调整后的页面头部样式 */
.page-header-container {
  background-color: white;
  border-radius: 0.25vw;
  box-shadow: 0 0.0625vw 0.125vw rgba(0,0,0,0.05);
  margin-bottom: 0.375vw;
}

.page-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5vw;
}

.page-header-content .header-left {
  flex: 1;
}

.page-header-content .page-title {
  margin: 0;
  font-size: 1.3vw;
  font-weight: 600;
  color: #1F77B4;
  text-align: center;
  flex: 1;
}

.header-right {
  position: absolute;
  top: 0vw;
  right: 1vw;
  z-index: 100;
}

.page-header-content .close-button {
  flex: 0;
}


/* 材料列表头部 */
.material-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 0.83vw; */
}

.material-list-header h3 {
  margin: 0;
  font-size: 1vw;
  font-weight: bold;
  color: #333;
}

/* 表格加载状态样式 */
.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.table-loading-content {
  text-align: center;
}

.table-loading-text {
  margin-top: 0.5vw;
  font-size: 0.8125vw;
  color: #666;
}


/*
在线预览模态框样式优化
*/
:global(.online-preview-modal .ant-modal-body) {
  padding: 0;
}

:global(.online-preview-modal .ant-modal-content) {
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.loading-container p {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

/* 隐藏Luckysheet工具栏和底部状态栏 */
:global(.luckysheet-sheettable) {
  overflow: hidden !important;
}

:global(.luckysheet-bottom-section) {
  display: none !important;
}

:global(.luckysheet-sheet-bar) {
  display: none !important;
}

:global(.luckysheet-info) {
  display: none !important;
}

:global(.luckysheet-toolbar) {
  display: none !important;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #d9d9d9;
}

.tabs button {
  font-size: 0.8vw;
  padding: 0.3vw 0.8vw;
  border: 1px solid #d9d9d9;
  background: #fafafa;
  cursor: pointer;
  border-bottom: none;
  border-radius: 0.3vw 0.3vw 0 0;
  margin-right: -1px;
}

.tabs button.active {
  color: white;
  /* background: #1F9ED9;
  border-color: #1F77B4; */
  background: cadetblue;
  /* background: lightslategray; */
  /* background: lightseagreen; */
}

/* 添加编辑状态样式 */
.cell-editing {
  padding: 0;
}

.editing-input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  text-align: center;
  font-size: 0.85vw;
  background: transparent;
}

.editing-input:focus {
  box-shadow: 0 0 0 2px #1F77B4;
}

/*
在线预览模态框样式优化
*/
:global(.online-preview-modal .ant-modal-body) {
  padding: 0;
}

:global(.online-preview-modal .ant-modal-content) {
  overflow: hidden;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;
}

.loading-container p {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

/* 隐藏Luckysheet工具栏和底部状态栏 */
:global(.luckysheet-sheettable) {
  overflow: hidden !important;
}

:global(.luckysheet-bottom-section) {
  display: none !important;
}

:global(.luckysheet-sheet-bar) {
  display: none !important;
}

:global(.luckysheet-info) {
  display: none !important;
}

:global(.luckysheet-toolbar) {
  display: none !important;
}

/* 添加编辑状态样式 */
.cell-edit-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
}

.cell-edit-wrapper :deep(.ant-input) {
  font-size: 0.8125vw;
  padding: 0 0.3125vw;
  height: 1.5vw;
  width: 100%;
}

.cell-content-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  box-sizing: border-box;
}

/* 可编辑单元格悬停效果 */
.table-cell.editable:hover {
  background-color: #e6f7ff !important;
  cursor: pointer;
}

:deep(.ant-btn) {
  font-size: 0.9vw;
  height: 2vw;
  padding: 0.1vw 0.6vw;
  border-radius: 0.2vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
